import React,{Component} from "react"
import ReactDOM,{render} from "react-dom"
import $ from "jquery"
import Comment from "./Comment.js"
import Jourpicture from "./Jourpicture.js"
import JourPictureAdd from "./JourPictureAdd.js"
import LaudPeople from "./LaudPeople.js"
export default class Jour extends Component {
	constructor(props){
		super(props)
		this.state={
			pictureReact:[],
			jourContent:"",
			showAllContent:{},
			laud:[],
			comment:[]
		}
	}
	componentWillMount(){
		//把有多少人赞数组拿出来，方便后续处理
		this.setState({
			laud:this.props.jour.laud
		})
		//把评论数组拿出来，方便后续处理
		this.setState({
			comment:this.props.jour.comment
		})

		//当说说的文字内容过多的处理
		let content=this.props.jour.content
		let contentCopy=content
		let showAllContent={cursor:"pointer",color:"blue",display:"none"}
		if(content.length>50){
			showAllContent.display="inlink-block"
			contentCopy=content.slice(0,50)
		}
		this.setState((prestate)=>{
			return ({
				jourContent:contentCopy,
				showAllContent:showAllContent
			})
		})


		//图片过多时候的处理
		var picture=this.props.jour.picture
		var pictureCount=picture.length
		if(pictureCount===1){
			let pictureArr=[]
			//组件中的height可以随便设置，因为会被componentDidMount的设置替换
			pictureArr.push(<Jourpicture key="1" src={"/img/"+picture[0]} col="col-lg-8 col-md-8 col-sm-8 col-xs-8 jour-picture" height="20px"/>)
			this.setState((prestate)=>{
				return ({
					pictureReact:pictureArr
				})
			})
			return ;
		}else if(pictureCount<=3){
			let pictureArr=[]
			for(let i=0;i<pictureCount;i++){
				pictureArr.push(<Jourpicture key={i} src={"/img/"+picture[i]} col="col-lg-4 col-md-4 col-sm-4 col-xs-4 jour-picture" height="20px"/>)
			}
			this.setState((prestate)=>{
				return ({
					pictureReact:pictureArr
				})
			})
			return ;
		}else if(pictureCount<=8){
			let pictureArr=[]
			for(let i=0;i<pictureCount;i++){
				pictureArr.push(<Jourpicture key={i} src={"/img/"+picture[i]} col="col-lg-3 col-md-3 col-sm-3 col-xs-3 jour-picture" height="20px"/>)
			}
			this.setState((prestate)=>{
				return ({
					pictureReact:pictureArr
				})
			})
			return ;
		}else{
			let pictureArr=[]
			for(let i=0;i<7;i++){
				pictureArr.push(<Jourpicture key={i} src={"/img/"+picture[i]} col="col-lg-3 col-md-3 col-sm-3 col-xs-3 jour-picture" height="20px"/>)
			}
			//这个是展开更多图片组件,这里props传值了一个函数，只要
			//子组件一调用这个属性，就立马执行了父组件的方法从而展开全部图片
			pictureArr.push(<JourPictureAdd key="10" showAllPicture={this.showAllPicture.bind(this)} src={"/img/"+picture[7]} col="col-lg-3 col-md-3 col-sm-3 col-xs-3 jour-picture" height="20px"/>)
			this.setState((prestate)=>{
				return ({
					pictureReact:pictureArr
				})
			})
			return ;
		}
	}

	componentDidMount(){
		let This=this
		let height=$(This.pictureEl).children(":first").width()
		$(This.pictureEl).find("img").attr("height",height+"px")	
		
		// 给说说图片的高度响应式
		$(window).on("resize",function(){
			//不加延时会造成点击右上角全屏按钮时，高度不准确
			setTimeout(function(){
				let height=$(This.pictureEl).children(":first").width()
				$(This.pictureEl).find("img").attr("height",height+"px")	
			},10)
		})
	}

	//点击展开所有图片就进行展开
	showAllPicture(){
		let picture=this.props.jour.picture
		let pictureCount=picture.length
		let height=$(this.pictureEl).children(":first").width()
		let pictureArr=[]
		for(let i=0;i<pictureCount;i++){
			pictureArr.push(<Jourpicture key={i} src={"/img/"+picture[i]} col="col-lg-3 col-md-3 col-sm-3 col-xs-3 jour-picture" height={height}/>)
		}
		this.setState((prestate)=>{
			return ({
				pictureReact:pictureArr
			})
		})
		return ;
	}

	//点击展开所有内容就进行展开
	showAllContent(){
		let showAllContent={cursor:"pointer",color:"blue",display:"none"}
		this.setState({
			jourContent:this.props.jour.content,
			showAllContent:showAllContent
		})
	}

	//点击头像切换到其他页面
	toggleother(){
		let username=this.props.jour.jourUserName
		window.location="/user/"+username
	}

	render(){
		return (
			<div>
				<div className="jour-all">
					<div className="avatar-date-username">
						<img 
							className="img-circle jour-img-avatar" 
							src={"/img/"+this.props.jour.jourAvatar} 
							width="35px" 
							height="35px" 
							alt="头像"
							style={{cursor:"pointer"}}
							onClick={(e)=>this.toggleother(e)}
						/>
						<span className="jour-username">{this.props.jour.jourUserName}</span>
						<span className="jour-data">{this.props.jour.date}</span>
					</div>
					<div className={this.state.jourContent?"jour-content":"hide"}>
						{this.state.jourContent}
						<span 
							onClick={this.showAllContent.bind(this)} 
							style={this.state.showAllContent}>
							 全文
						</span>
					</div>
					<div 
						className={this.state.pictureReact?"row":"hide"} 
						ref={(pictureEl)=>this.pictureEl=pictureEl} 
						style={{"marginTop":"10px"}}
					>
						{this.state.pictureReact}
					</div>
					
					
					<div className={this.state.laud.length>0?" ":"hide"}  style={{fontSize:"15px",margin:"15px"}}>
						{this.state.laud.map(function(val,index){
							return <LaudPeople laud={val} key={index} />
						})}
						<span className={this.state.laud.length>0?" ":"hide"}>{this.state.laud.length}人觉得很赞</span>
					</div>
					<div style={{fontSize:"17px"}} className={this.state.comment?"":"hide"}>
						{this.state.comment?this.state.comment.map((val,index)=>{
							if(!val.commentUserName) return ;
							return (< Comment  username={this.props.username} comment={val} key={index}/>)
						}):""}

					</div>
				</div>
				<div className="nav-bg"></div>
			</div>
		)
	}
}




















